<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
  <style type="text/css">
    @keyframes show {
      0% {
        opacity: 0;
      }

      100% {
        opacity: 1;
      }
    }

    @keyframes hide {
      0% {
        opacity: 1;
      }

      100% {
        opacity: 0;
      }
    }

    .toast_box {
      /* width: 100%; */
      position: absolute;
      bottom: 50%;
      left: 50%;
      /* justify-content: center; */
      z-index: 10;
      transform: translate(-50%, -50%);
      display: none;
    }

    .toast_box p {
      box-sizing: border-box;
      padding: 10px 20px;
      width: max-content;
      /* 提示框的背景色 */
      background: #707070;
      color: #fff;
      font-size: 16px;
      text-align: center;
      border-radius: 6px;
      opacity: 0.8;
    }

    .toliet {
      margin: 0 auto;
    }
  </style>
</head>

<body>
  <div id="hotal">
    <!-- 提示框 -->
    <div class="toast_box">
      <p id="toast"></p>
    </div>
    <button id="toliet" type="button" onclick="correct()">正常</button>
    <button id="toliet" type="button" onclick="warning()">警告</button>
    <button id="toliet" type="button" onclick="error()">报错异常</button>
  </div>
  <script type="text/javascript">
    //形参分别是: 提示内容,时间,背景色,字体颜色
    function toast(text, time, bgcolor, color) {
      let toast = document.getElementById('toast');
      let toast_box = document.getElementsByClassName('toast_box')[0];
      toast.innerHTML = text;
      toast.style.background = bgcolor;
      toast.style.color = color;
      toast_box.style.animation = 'show 1.5s'
      toast_box.style.display = 'inline-block';
      setTimeout(function () {
        toast_box.style.animation = 'hide 1.5s'
        setTimeout(function () {
          toast_box.style.display = 'none';
        }, 1400)
      }, time)
    }

    //调用
    function correct() {
      toast("is ok!", 5000, "#00CC00", "#FFFFFF");
    }

    function warning() {
      toast("异常提醒", 5000, "#FF6600", "#FFFFFF");
    }

    function error() {
      toast("报错", 5000, "#CC0000", "#FFFFFF");
    }

  </script>
</body>

</html>
